<template>
  <div class="page-container">
    <h2>新增秒杀</h2>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" class="form-card">
      <el-form-item label="秒杀名称" prop="seckillName">
        <el-input v-model="formData.seckillName" placeholder="请输入秒杀名称" />
      </el-form-item>
      <el-form-item label="原价" prop="beforePrice">
        <el-input-number v-model="formData.beforePrice" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="秒杀价" prop="afterPrice">
        <el-input-number v-model="formData.afterPrice" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="库存数量" prop="inventoryNum">
        <el-input-number v-model="formData.inventoryNum" :min="0" />
      </el-form-item>
      <el-form-item label="秒杀状态" prop="seckillState">
        <el-select v-model="formData.seckillState" placeholder="请选择秒杀状态">
          <el-option label="未开始" :value="0" />
          <el-option label="进行中" :value="1" />
          <el-option label="已结束" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="选择开始时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="formData.endTime"
          type="datetime"
          placeholder="选择结束时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { seckillApi } from '@/api/seckill'

const formRef = ref()
const submitting = ref(false)

const formData = reactive({
  seckillName: '',
  beforePrice: 0,
  afterPrice: 0,
  inventoryNum: 0,
  seckillState: 0,
  startTime: null,
  endTime: null
})

const formRules = {
  seckillName: [{ required: true, message: '请输入秒杀名称', trigger: 'blur' }],
  beforePrice: [{ required: true, message: '请输入原价', trigger: 'blur' }],
  afterPrice: [{ required: true, message: '请输入秒杀价', trigger: 'blur' }],
  inventoryNum: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
  seckillState: [{ required: true, message: '请选择秒杀状态', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
}

const handleReset = () => {
  Object.assign(formData, {
    seckillName: '',
    beforePrice: 0,
    afterPrice: 0,
    inventoryNum: 0,
    seckillState: 0,
    startTime: null,
    endTime: null
  })
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true
    await seckillApi.addSeckill(formData)
    ElMessage.success('新增成功')
    handleReset()
  } catch (e) {
    if (e !== false) ElMessage.error('新增失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.page-container { padding: 20px; }
.form-card { max-width: 600px; }
</style>
